<template>
  <!--  通过跨组件通信vuex实现侧边栏跨组件伸缩-->
  <el-aside :width="!$store.state.isCollapse ? '250px':'60px'">
    <!--    点击通过logo返回首页-->
    <div class="logo" @click="gotoHome">
      <img src="@/assets/img/vue.svg" alt="logo">
      <!--通过跨组件通信vuex实现标题的显示与隐藏-->
      <h4 v-show="!$store.state.isCollapse">云南省邮政业大数据中心</h4>
    </div>
    <!--    这是使用element plus菜单组件-->
    <el-menu class="el-menu-vertical-demo" router :default-active="$route.path" mode="vertical"
             :collapse-transition="false" :collapse="$store.state.isCollapse">
      <template v-for="(item, i) in list" :key="i">
        <!--无子菜单遍历逻辑-->
        <el-menu-item v-if="!item.children" :index="item.path" :key="`${item.path}-item`">
          <component :is="item.icon" class="icons"></component>
          <template #title>
            <div class="menu-item-content">
              <span class="menu-title"> {{ item.label }}</span>
            </div>
          </template>
        </el-menu-item>
        <!-- 有子菜单遍历逻辑-->
        <el-sub-menu v-else :index="item.name" :key="`${item.path}-submenu`">
          <template #title>
            <div class="menu-item-content">
              <component :is="item.icon" class="icons"></component>
              <span class="menu-title">{{ item.label }}</span>
            </div>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
            <div class="menu-item-content">
              <component :is="child.icon" class="icons"></component>
              <span class="menu-title">{{ child.label }}</span>
            </div>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </el-aside>
</template>

<script src="@/assets/js/common/commonAside/index.js"></script>